<template>
  <!-- 账户安全 -->
  <div class="idSecurity">
      <head-usual :title="security" :to="to"></head-usual>
      <div class="security-hd" @click="active">
          <p class="active">安全设置</p>
          <p>实名认证</p>
          <span class="fenge"></span>
      </div>
      <!-- 信息各项参数设置 -->
      <ul class="params" v-if="flag">
          <li>
              <span>用户名</span>
              <span>{{initialState.name}}</span>
          </li>
          <li>
              <p>
              <span>绑定手机</span>
              <span class="locked">已绑定</span>
              </p>
              <span class="squre-bianji" @click="switchTarget('phone')">修改</span>
          </li>
            <li>
              <p>
                 <span>绑定邮箱</span>
                <span class="unlocked" v-if="initialState.email==''">（未绑定）</span>
                <span v-else>{{initialState.email}}</span>
              </p>
              <span class="squre-set" @click="switchTarget('email')">设置</span>
          </li>
          <li>
              <span>登录密码</span>
              <span class="squre-bianji" @click="switchTarget('pwd')">修改</span>
          </li>
      </ul>
      <!-- 认证体系 -->
      <ul class="params" v-if="!flag" >
          <li v-if="this.$store.state.userinfo.type==1">
                <p>
                <span>身份认证</span>
                  <span v-if="initialState.isVerified"  class="locked">(已认证)</span>
                  <span v-else  class="unlocked">(未认证)</span>
                </p>
              <span class="squre-bianji" @click="id_edit">查看</span>
          </li>
           <li v-else>
              <p>
                <span>企业认证</span>
                   <span v-if="initialState.isVerified"  class="locked">(已认证)</span>
                   <span v-else  class="unlocked">(未认证)</span>
              </p>
              <span class="squre-set" @click="pt_set">设置</span>
          </li>
      </ul>
          <!--弹出绑定手机第一步 -->
          <mt-popup  v-model="showModifyPhone" position="right">
                <div class="phoneBinding">
                  <!-- 头部 -->
                   <mt-header :title="phoneData.phone==''?'绑定手机':'修改绑定手机'" fixed>
                        <a islink slot="left">
                        <mt-button icon="back"  @click="showModifyPhone=false"></mt-button>
                        </a> 
                  </mt-header> 
                  <!-- 验证流程 -->
                  <div class="phone-yanzheng-process">
                      <!-- <div class="process-1">
                          <p>
                              <span>1</span>
                              <span>验证原手机号</span>
                              <span class="yanzheng-fenge"></span>
                          </p>
                          <p>
                              <span>2</span>
                              <span>验证新手机号</span>
                              <span  class="yanzheng-fenge"></span>
                          </p>
                          <p>
                              <span>3</span>
                              <span>验证成功</span>
                          </p>
                      </div> -->
                      <!-- 输入验证码 -->
                      <div class="input-number">
                          <input type="number" placeholder="请输入你的新手机号" v-model="phoneData.phone"/>
                          <span class="phone-fenge"></span>
                          <button @click="getCode(phoneData)" class="yanzheng-button"> 
                             <span v-show="phoneData.show" class="span-left">获取验证码</span>
                             <span v-show="!phoneData.show" class="count">{{phoneData.count}} s</span>
                          </button>
                      </div>
                      <!-- 请输入验证码 -->
                      <div class="input-number-2">
                           <input type="text" class="yanzheng-input"  v-model.trim="phoneData.code" placeholder="验证码">
                      </div>
                      <mt-button type="primary" size="large"  class="next-step" @click="handleModifyPhone">确定 </mt-button>

                  </div>
                </div>  
          </mt-popup>
          <!-- 弹出绑定手机第二步 -->
          <mt-popup v-if="false" position="right">
            <div class="phoneBinding">
              <!-- 头部 -->
            <mt-header title="绑定手机" fixed>
                        <a is-link slot="left">
                        <mt-button icon="back" @click.native="popup2 = false"></mt-button>
                        </a> 
            </mt-header> 
              <!-- 验证流程 -->
              <div class="phone-yanzheng-process">
                  <div class="process-1">
                      <p>
                          <span>1</span>
                          <span>验证原手机号</span>
                          <span class="yanzheng-fenge"></span>
                      </p>
                      <p class="process-2">
                          <span>2</span>
                          <span>验证新手机号</span>
                          <span  class="yanzheng-fenge"></span>
                      </p>
                      <p>
                          <span>3</span>
                          <span>验证成功</span>
                      </p>
                  </div>
                  <!-- 输入验证码 -->
                  <div class="input-number">
                      <input type="number" value="18981490921"/>
                      <span class="phone-fenge"></span>
                      <span>获取验证码</span>
                  </div>
                  <!-- 请输入验证码 -->
                  <div class="input-number-2">
                      <input type="text" placeholder="请输入验证码" class="yanzheng-input"/>
                  </div>
                  <mt-button type="primary" size="large" @click.native="handleClick2" class="next-step">确定</mt-button>

              </div>
            </div>   
          </mt-popup>
          <!-- 验证新绑定手机 -->
          <mt-popup v-if="false" position="right">
            <div class="yanzheng-phone-3">
                <!-- 头部 -->
               <!-- <mt-header title="绑定手机" fixed>
                        <a is-link slot="left">
                        <mt-button icon="back" @click.native="popup3 = false"></mt-button>
                        </a> 
               </mt-header>  -->
                <!-- 验证码板块 -->
                <div class="yanzheng-area">
                <!-- 输入验证码 -->
                  <div class="input-number">
                      <input type="number" value="18981490921"/>
                      <span class="phone-fenge"></span>
                      <span>获取验证码</span>
                  </div>
                  <!-- 请输入验证码 -->
                  <div class="input-number-2">
                      <input type="text" placeholder="请输入验证码" class="yanzheng-input" />
                  </div>
                  <!-- <p class="input-number-3"><span>亲爱的</span><span>惜丶Fc</span><span>13991400765</span><span>,您绑定的手机号码为：</span><span class="yanzheng-phone">13991400765</span><span>,更改绑定的手机号请输入新的手机号。</span><span class="unlock">解绑</span></p> -->
                  <mt-button type="primary" size="large" @click.native="handleClick3" class="next-step">确定</mt-button>
                </div>
            </div>
          </mt-popup>
          <!-- 修改密码 -->
          <mt-popup   v-model="showModifyPwd" position="right">
              <!-- 修改密码 -->
              <div class="psw-edit">
                <mt-header title="修改密码" fixed>
                        <a is-link slot="left">
                        <mt-button icon="back"  @click="showModifyPwd=false"></mt-button>
                        </a> 
                  </mt-header> 
                  <div class="psw-input">
                        <!-- 输入验证码 -->
                            <!-- 请输入验证码 -->
                            <!-- 请输入验证码 -->
                            <div class="input-number-2">
                                <input type="password" placeholder="请输入原密码" class="yanzheng-psw" v-model="pwdData.oldpwd"/>
                            </div>
                            <div class="input-number-2">
                                <input type="password" placeholder="请输入新密码" class="yanzheng-psw" v-model="pwdData.newpwd"/>
                            </div>
                            <!-- 请输入验证码 -->
                            <div class="input-number-2">
                                <input type="password" placeholder="请再次输入新密码" class="yanzheng-psw" v-model="pwdData.again"/>
                            </div>
                            <mt-button type="primary" size="large" @click="handleModifyPwd" class="next-step">确定</mt-button>
                    </div>
              </div>
          </mt-popup>
          <!-- 修改绑定邮箱   -->
          <mt-popup  v-model="showModifyEmial" position="right">
             <!--修改绑定邮箱 -->
            <div class="yanzheng-phone-3">
                <!-- 头部 -->
                <mt-header :title="emailData.email==''?'绑定邮箱':'修改邮箱'" fixed>
                    <a islink slot="left">
                      <mt-button icon="back" @click="showModifyEmial=false"></mt-button>
                    </a> 
                  </mt-header> 
                <!-- 验证码板块 -->
                <div class="yanzheng-area">
                <!-- 输入验证码 -->
                  <div class="input-number">
                      <input type="email" v-model="emailData.email" class="yanzheng-input" placeholder="请输入邮箱" />
                       <span class="phone-fenge"></span>
                      <button @click="getCodeE(emailData)" class="yanzheng-button"> 
                             <span v-show="emailData.show" class="span-left">获取验证码</span>
                             <span v-show="!emailData.show" class="count">{{emailData.count}} s</span>
                    </button>
                  </div>
                   <div class="input-number-2">
                      <input type="text" v-model="emailData.code" placeholder="请输入验证码" class="yanzheng-input" />
                  </div>
                  <mt-button type="primary" size="large" @click="HandleModifyEmail" class="next-step">确定</mt-button>
                </div>
            </div>
          </mt-popup>
          <!-- 身份认证 -->
          <mt-popup v-model="showModifyIdentify1" position="right">
            <div class="cIndetificate">
                <mt-header title="身份认证" fixed>
                  <a islink slot="left">
                    <mt-button icon="back" @click="showModifyIdentify1=false"></mt-button>
                  </a> 
                </mt-header> 
                <div class="plate plate-padding plate-identity">
                    <div class="identity-active">
                        <a href="jacascript:;">1.提交身份证照片</a>
                    </div>
                    <div class="identity-marginl">
                        <a href="jacascript:;">2.等待审核</a>
                    </div>
                    <div class="identity-marginl">
                          <a href="jacascript:;">3.审核结果</a>
                    </div>   
                </div>
                <!-- 填写姓名 -->
                <input type="text" placeholder="请填写姓名" class="certificate-title" v-model="identity.name" />
                <!-- 填写身份证号码 -->
                <input type="text" placeholder="请填写身份证号码" class="certificate-title id-number" v-model="identity.idno" />
                <!-- 上传图片 -->
                <div class="photo-up photo-up1" style="">
                    <img src="~@/assets/camery.png" class="up-camery"/>
                  
                    <input type="file" class="inputfiles inputfiles1"  @change="uploadHandlde(1)"/>
                     <p class="up-title">拍摄人像</p>   
                </div>
                <!-- 上传图片 -->
                <div class="photo-up photo-up2" >
                  <img src="~@/assets/camery.png" class="up-camery"/>
                  <input type="file" class="inputfiles inputfiles2"  @change="uploadHandlde(2)"/>
                   <p class="up-title">拍摄国徽页</p>  
                </div>
                <p class="up-text" >{{upText}}</p>
                <mt-button type="primary" class="next-step quxiao" @click="showModifyIdentify1=false">取消</mt-button>
                <mt-button type="primary" @click.native="handleIndentity('own')" class="next-step" >确认</mt-button>
              </div>
          </mt-popup>
          <!-- 证书认证 -->
          <mt-popup v-model="showModifyIdentify2" position="right">
            <div class="cIndetificate">
                <mt-header title="证书认证" fixed>
                  <a islink slot="left">
                    <mt-button icon="back" @click="showModifyIdentify2=false"></mt-button>
                  </a> 
                </mt-header> 
                <div class="plate plate-padding plate-identity">
                    <div class="identity-active">
                        <a href="jacascript:;">1.提交证书照片</a>
                    </div>
                    <div class="identity-marginl">
                        <a href="jacascript:;">2.等待审核</a>
                    </div>
                    <div class="identity-marginl">
                          <a href="jacascript:;">3.审核结果</a>
                    </div>   
                </div>
                <!-- 填写证书名称-->
                <input type="text" placeholder="公司名称" v-model="identity.name" class="certificate-title" />
                <input type="text" placeholder="营业执照编码" v-model="identity.idno"  class="certificate-title" />
                <!-- 上传图片 -->
                <div class="photo-up photo-up3">
                  <img src="~@/assets/camery.png" class="up-camery"/>
                  <input type="file" class="inputfiles inputfiles3"  @change="upload3"/>
                  <p class="up-title">拍摄营业执照页</p>  
                </div>
                <p class="up-text up-text3" >{{upText}}</p>
                <mt-button type="primary" class="next-step quxiao" @click="showModifyIdentify2=false">取消</mt-button>
                <mt-button type="primary" @click.native="handleIndentity('qy')" class="next-step" >确认</mt-button>
              </div>
          </mt-popup>
    </div> 
</template>

<script>
import { Popup, MessageBox, Header } from "mint-ui";
import headUsual from "@/pages/components/headUsual";
import { ModifyPhone, ModifyPwd, ModifyEmail ,IdentityAuthentication,InitialState} from "@/api/user/auth";
import { SendSmsCode, VerifySmsCode,SendEmailCode,VerifyEmailCode } from "@/api/filter";
import {UploadPicture} from '@/api/user/upload';
const TIME_COUNT = 60;
export default {
  data() {
    return {
      to: "/user",
      id: 0,
      name: "",
      initialState:"",//初始状态及值
      modifyPwdParam: {},
      security: "账号安全",
      flag: "true",
      codeMsg: "获取验证码",
      upText:
        "拍摄您的二代身份证原件，请确保图片清晰、四角完整、信息仅用于身份验证、筑功者保证您的信息安全",
      upText2: "系统正在审核，请等待",
      title: "身份认证",
      srcTop: require("@/assets/id_zheng.png"),
      srcBottom: require("@/assets/shenfen_fan.png"),
      phoneData: {
        phone: "",
        code: "",
        show: true,
        count: "",
        timer: null
      },
      pwdData: {
        oldpwd: "",
        newpwd: "",
        again: ""
      },
     // email: "", //邮箱
      emailData:{
        email: '',
        code: "",
        show: true,
        count: "",
        timer: null
      },
      identity:{
        name:"",
        idno:"",
        idfront:"",
        idreverse:"",
        businesslicence:""
      },
      showModifyPhone: false, //修改手机
      showModifyEmial: false, //邮箱
      showModifyPwd: false, //密码
      showModifyIdentify1: false, //身份认证
      showModifyIdentify2: false //企业认证
    };
  },
  created() {
    this.id = this.$store.state.userinfo.id;
    this.name = this.$store.state.userinfo.name;
    this.Initialization();
    if (sessionStorage.getItem("phone-set") == 1) {
      this.stateChange();
    }
  },
  methods: {
    //初始状态
    Initialization(){
      InitialState().then(res=>{
        if(res.StatusCode===200)
        {
          this.initialState=res.Data;
          this.emailData.email=this.initialState.email;
        }
      });
    },
    //设置切换
    switchTarget(cmd) {
      switch (cmd) {
        case "phone":
          {
            this.showModifyPhone = true;
          }
          break;
        case "email":
          {
            this.showModifyEmial = true;
          }
          break;
        case "pwd":
          {
            this.showModifyPwd = true;
          }
          break;
      }
    },
    getCode(phoneData) {
      var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!myreg.test(phoneData.phone)) {
        this.$toast("请输入正确的手机号");
        return false;
      } else {
        SendSmsCode(this.phoneData.phone).then(res => {
          if (res.StatusCode === 200) {
            this.$toast("发送成功");
            if (!this.phoneData.timer) {
              this.phoneData.count = 60;
              this.phoneData.show = false;
              this.phoneData.timer = setInterval(() => {
                if (this.phoneData.count > 0 && this.phoneData.count <= 60) {
                  this.phoneData.count--;
                } else {
                  this.phoneData.show = true;
                  clearInterval(this.phoneData.timer);
                  this.phoneData.timer = null;
                }
              }, 1000);
            }
          }
        });
      }
    },
    getCodeE(emailData) {
      var myreg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/;
      if (!myreg.test(emailData.email)) {
        this.$toast("请输入正确的邮箱");
        return false;
      } else {
        SendEmailCode(this.emailData.email).then(res => {
          if (res.StatusCode === 200) {
            this.$toast("发送成功");
            if (!this.emailData.timer) {
              this.emailData.count = 60;
              this.emailData.show = false;
              this.emailData.timer = setInterval(() => {
                if (this.emailData.count > 0 && this.emailData.count <= 60) {
                  this.emailData.count--;
                } else {
                  this.emailData.show = true;
                  clearInterval(this.emailData.timer);
                  this.emailData.timer = null;
                }
              }, 1000);
            }
          }
        });
      }
    },
    //修改手机号
    handleModifyPhone() {
      //验证非空及合法
      var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!myreg.test(this.phoneData.phone)) {
        this.$toast("请输入正确的手机号");
        return false;
      }
      if (this.phoneData.code == "") {
        this.$toast("验证码不能为空");
        return false;
      }
      //验证短信验证码
      VerifySmsCode(this.phoneData.phone, this.phoneData.code).then(res => {
        if (res.StatusCode === 200) {
          ModifyPhone(this.phoneData.phone, this.phoneData.code).then(
            msg => {
              if (msg.StatusCode === 200) {
                this.$toast("修改成功");
                this.showModifyPhone = false;
                this.phoneData = {
                  phone: "",
                  code: "",
                  show: true,
                  count: "",
                  timer: null
                };
              } else {
                MessageBox.alert(res.Data);
              }
            }
          );
        } else {
          MessageBox.alert(res.Data);
        }
      });
    },
    //修改密码
    handleModifyPwd() {
      //验证
      if (this.pwdData.oldpwd == "") {
        this.$toast("请输入原密码");
        return;
      }
      if (this.pwdData.newpwd == "") {
        this.$toast("请输入新密码密码");
        return;
      }
      if (this.pwdData.again == "") {
        this.$toast("请再一次输入新密码");
        return;
      }
      if (this.pwdData.again != this.pwdData.newpwd) {
        this.$toast("两次密码不一致");
        return;
      }
      ModifyPwd(this.pwdData.oldpwd, this.pwdData.newpwd).then(res => {
        if (res.StatusCode === 200) {
          this.$toast(res.Data);
          this.showModifyPwd = false;
          this.pwdData = {
            oldpwd: "",
            newpwd: "",
            again: ""
          };
        } else {
          MessageBox.alert(res.Data);
        }
      });
    },
    HandleModifyEmail() {
      var regex = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;
      if (regex.test(this.emailData.email)) {
        VerifyEmailCode(this.emailData.email,this.emailData.code).then(res=>{
          if(res.StatusCode===200){
             ModifyEmail(this.emailData.email).then(res => {
              if (res.StatusCode === 200) {
                this.$toast(res.Data);
                this.showModifyEmial = false;
              } else {
                this.$toast(res.Data);
              }
            });
          }
          else{
             this.$toast(res.Data);
          }
        });
       
      } else {
        this.$toast("邮箱格式不正确");
      }
    },

    // 安全设置和激活状态切换
    active(e) {
      
      $(".security-hd")
        .children()
        .each(function(index) {
          $(".security-hd")
            .children()
            .eq(index)
            .removeClass("active");
        });
      $(e.target).addClass("active");
      if (e.target.innerHTML == "实名认证") {
        this.flag = false;
        return;
      } else {
        this.flag = true;
        return;
      }
    },

    // 证书认证
    pt_set() {
       if(this.initialState.isVerified){
        // 跳转成功页面
         this.$router.push("/user/security/cIndetificate"+name);
        return false;
      }
      else if(!this.initialState.isVerified&&this.initialState.businesslicence!=""){
        //审核中
         this.$router.push("/user/security/idIndetificate"+name);
      }
      else {
        //未认证 
        this.showModifyIdentify2 = true;
      }
      
    },
    // 身份认证
    id_edit() {
      //如果实名认证通过
      if(this.initialState.isVerified){
        // 跳转成功页面
         this.$router.push("/user/security/cIndetificate"+name);
        return false;
      }
      else if(!this.initialState.isVerified&&this.initialState.idfront!=""&&this.initialState.idreverse!=""){
        //审核中
         this.$router.push("/user/security/idIndetificate"+name);
      }
      else {
        //未认证 
           this.showModifyIdentify1 = true;
      }
   
    },
    //确认提交 
    handleIndentity(cmd) {
      if(this.identity.name=="")
      {
        this.$toast("名称不能为空");
         return  ;
      }
      let myreg = /(^\d{15}$)|(^\d{17}(x|X|\d)$)/;
      if(cmd=='own'){
        if(!myreg.test(this.identity.idno)){ 
            this.$toast("请输入正确的身份证号！！");
            return;
          }
          if(this.identity.idfront==""||this.identity.idreverse=="") 
          {
            this.$toast("请先上传身份证图片");
            return;
          }
      }
      else{
 
         if(this.identity.idno.trim()==""){ 
            this.$toast("请输入正确的营业执照编码！！");

            return;
          }
          if(this.identity.businesslicence=="") 
          {
            this.$toast("请先营业执照图片");
            return;
          }
      }
  
       IdentityAuthentication(this.identity).then(res=>{
          if(res.StatusCode===200)
          {
             this.$router.push("/user/security/idIndetificate");
          }
      });
    },
    //确认提交
    handleCheck2() {
      this.$router.push("/user/security/cIndetificate");
    },
    //图片更换操作
    uploadHandlde(cmd) {
      let file = $(".inputfiles"+cmd)[0].files[0];
      let param = new FormData();
      let reader = new FileReader();
      let that=this;
       if(file!=''){  
        param.append('file', file,file.name); //单个图片 ，多个用循环 append 添加  
         UploadPicture(param).then(res=>{
          if(res.StatusCode===200)
          {
            let xx=res.Data.src.replace('ms','mx');
            if(cmd==1){
               that.identity.idfront= xx;
            }
           else 
            {
              that.identity.idreverse= xx;
            }
             reader.onload = function() {
              $(".photo-up"+cmd).css("background-image", "url(" + xx + ")");
           
            };
               reader.readAsDataURL(file);
          }
          else{
                 this.$toast("网络连接异常");
          }
        });
      }
    },
   
    //图片更换操作
    upload3() {
       let file = $(".inputfiles3")[0].files[0];
      let param = new FormData();
      let reader = new FileReader();
      let that=this;
       if(file!=''){  
        param.append('file', file,file.name); //单个图片 ，多个用循环 append 添加  
         UploadPicture(param).then(res=>{
          if(res.StatusCode===200)
          {
            let xx=res.Data.src.replace('ms','mx');
            that.identity.businesslicence=xx;
             reader.onload = function() {
              $(".photo-up3").css("background-image", "url(" +  xx + ")");
           
            };
               reader.readAsDataURL(file);
          }
          else{
                 this.$toast("网络连接异常");
          }
        });
      }
    }
  },
  components: { headUsual }
};
</script>

<style lang="scss" scoped>
.headUsual {
  border-bottom: 1px solid #eeeeee;
}
// 头部
.mint-header {
  background: white;
  color: #282828;
  font-size: 18px;
  height: 52px;
  border-bottom: 1px solid #f4f4f4;
  .headusual-2 {
    width: 100px;
    text-align: right;
    .icon {
      display: block;
      float: left;
    }
    .icon-list {
      margin-right: 25px;
      margin-left: 30.67px;
    }
  }
}
.security-hd {
  width: 100%;
  display: flex;
  text-align: center;
  height: 64px;
  font-size: 16px;
  color: #282828;
  border-bottom: 10px solid #f4f4f4;
  > p {
    width: 50%;
    height: 64px;
    line-height: 64px;
  }
  .fenge {
    width: 1px;
    height: 22px;
    background: #999999;
    display: block;
    position: absolute;
    left: 50%;
    margin-top: 21.5px;
  }
  .active {
    color: #fd4f00;
  }
}
// 下面各项参数设置
.params {
  padding: 0 12px;
  > li {
    border-bottom: 1px solid #eeeeee;
    padding: 16px 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    > :first-child {
      font-size: 18px;
      color: #282828;
       :nth-child(2) {
    
      font-size: 14px;
    }
    }
   
    > :last-child {
      color: #999999;
      font-size: 14px;
    }
    .locked {
      color: #3887fe;
      // padding-left: 9px;
    }
    .unlocked {
      color: #fd4f00;
      // padding-left: 9px;
    }
    .squre-set {
      padding: 4.5px 22px;
      background: #ee5555;
      color: #ffffff;
      border-radius: 5%;
      border: 1px solid #ee5555;
    }
    .squre-set-success {
      color: #999999;
      font-size: 14px;
    }
    .squre-bianji {
      padding: 4.5px 22px;
      background: white;
      border: 1px solid #999999;
      border-radius: 5%;
      color: #333333;
    }
  }
}
// 设置弹出层参数
.mint-popup {
  width: 100%;
  height: 100%;
}
//绑定手机第一步
.phone-yanzheng-process {
  padding: 15px 14px 41.3px 14px;
  margin-top: 42px;
  > .process-1 {
    display: flex;
    > p {
      font-size: 14px;
      color: #282828;
      overflow: hidden;
      display: flex;
      > span {
        display: block;
        float: left;
        text-align: center;
      }
      > :first-child {
        width: 18px;
        height: 18px;
        background: #fd4f00;
        border-radius: 50%;
        color: #ffffff;
        margin-right: 7.5px;
        line-height: 18px;
      }
      .yanzheng-fenge {
        width: 23px;
        height: 1px;
        background: #282828;
        margin-top: 9.5px;
        margin-left: 8px;
        margin-right: 8px;
      }
    }
    > :nth-child(2) {
      background: white;
      opacity: 0.5;
    }
    > :last-child {
      background: white;
      opacity: 0.5;
    }
    .process-2 {
      opacity: 1;
    }
  }
  // 输入验证码
  .input-number {
    padding-bottom: 17.3px;
    border-bottom: 1px solid #fd4f00;
    padding-left: 14px;
    display: flex;
    margin-bottom: 23px;
    align-items: center;
    > :first-child {
      font-size: 14px;
      width: 65%;
    }
    > :nth-child(2) {
      width: 2px;
      height: 25px;
      background: #fd4f00;
      display: block;

      margin-right: 20px;
    }
    > :nth-child(3) {
      display: block;
      // line-height: 28px;
    }
  }
  // 请输入验证码
  .input-number-2 {
    padding-bottom: 17.3px;
    border-bottom: 1px solid #fd4f00;
    padding-left: 14px;
    > :first-child {
      font-size: 14px;
      padding: 2px 0;
      height: 28px;
    }
  }
  // 下一步
  .next-step {
    margin-top: 375px;
    margin-left: 83.345px;
    width: 202px;
    height: 43px;
    background: #fd4f00;
  }
}
// 直接绑定新手机
.yanzheng-phone-3 {
  padding-bottom: 490.12px;
}
.yanzheng-area {
  padding: 0 14px;
  margin-top: 67px;
}
.input-number {
  padding-bottom: 17.3px;
  border-bottom: 1px solid #fd4f00;
  padding-left: 14px;
  display: flex;
  margin-bottom: 23px;
  margin-top: 30px;
  > :first-child {
    font-size: 14px;
    width: 75%;
  }
  > :nth-child(2) {
    width: 1px;
    height: 25px;
    background: #fd4f00;
    display: block;

    margin-right: 17px;
  }
  > :nth-child(3) {
    line-height: 28px;
  }
}
// 请输入验证码
.input-number-2 {
  padding-bottom: 17.3px;
  border-bottom: 1px solid #fd4f00;
  padding-left: 14px;
  > :first-child {
    font-size: 14px;
    padding: 2px 0;
    height: 28px;
  }
}
.input-number-3 {
  color: #dcdcdc;
  font-size: 14px;
  padding-top: 15px;
  padding-left: 13px;
  overflow: hidden;

  //padding-bottom:600px;
  > span {
    display: block;
    float: left;
  }
  .yanzheng-phone {
    display: block;
    word-break: break-all;
    width: 90px;
    height: 20px;
  }
  .unlock {
    color: #3887fe;
  }
}
// 更改修改密码样式
.psw-input {
  padding: 0 12px;
  margin-top: 67px;
  .input-number {
    border-color: #dcdcdc;
    margin-bottom: 0px;
  }
  .psw-fenge {
    background: #cccccc;
    margin-right: 13px;
  }
  .input-number-2 {
    border-color: #dcdcdc;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 14px;
  }
  .get-yanzheng {
    font-size: 14px;
  }
  .mint-button {
    width: 200px;
    height: 44px;
    background: #fd4f00;
    position: absolute;
    bottom: 66px;
    left: 50%;
    margin-left: -100px;
  }
}
//更改绑定邮箱修改及新设置绑定手机号样式
.yanzheng-phone-3 {
  .input-number {
    border-color: #dcdcdc;
    margin-bottom: 0px;
  }
  .input-number-2 {
    border-color: #dcdcdc;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 14px;
  }
  .email-fenge {
    background: #cccccc;
    margin-right: 13px;
  }
  .get-yanzhengma {
    font-size: 14px;
  }
  .next-step {
    width: 200px;
    height: 44px;
    background: #fd4f00;
    position: absolute;
    bottom: 66px;
    left: 50%;
    margin-left: -100px;
  }
}
.input-number {
  border-color: #dcdcdc !important;
}
.input-number-2 {
  border-color: #dcdcdc !important;
}
.phone-fenge {
  background: #cccccc !important;
}
// 设置头部
.mint-header {
  background: white;
  color: #282828;
  font-size: 18px;
  height: 52px;
  border-bottom: 1px solid #f4f4f4;
  a {
    display: block;
  }
}
//认证
.plate-identity {
  width: 100%;
  padding: 0;
  border-bottom: 0;
  display: flex;
  margin-top: 48px;
}
.plate-identity div {
  position: relative;
  height: 40px;
  flex-direction: row;
  padding-right: 20px;
  background-color: #f0f0f0;
}
.plate-identity div {
  &:first-child {
    flex: 0 0 44%;
  }
  &:nth-child(2) {
    flex: 0 0 30%;
    a {
      padding-left: 10px;
      &:after {
        right: -5px;
      }
    }
  }
  &:last-child {
    flex: 0 0 26%;
  }
}
.plate-identity div a {
  display: block;
  // padding: 0px 20px;
  color: #999;
  height: 40px;
  line-height: 40px;
  background-color: #f0f0f0;
  font-size: 12px;
}
.plate-identity div a:after {
  content: "";
  position: absolute;
  top: -2px;
  right: 0;
  display: block;
  height: 40px;
  width: 40px;
  background-color: #f0f0f0;
  border-right: 4px solid #fff;
  border-top: 4px solid #fff;
  transform: scale(0.707) rotate(45deg);
  box-sizing: content-box;
  border-top-left-radius: 6px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
  z-index: 1;
}
.plate-identity .identity-active {
  color: #fff;
}
.plate-identity .identity-active a {
  background-color: #3887fe;
  color: #fff;
  padding-right: 15px;
}
.plate-identity .identity-active a:after {
  background-color: #3887fe;
}
.plate-identity .identity-marginl a {
  margin-left: -20px;
}
.plate-identity > div:last-child {
  padding-right: 0;
}
.plate-identity > div:last-child a:after {
  display: none;
}

.cIndetificate {
  padding: 10px 13px;
  text-align: center;
  // 认证流程
  .indetificate-process {
    display: flex;

    color: #ffffff;
    text-align: center;
    > p {
      width: 33.3%;
      padding: 8px 0;
      background: #3887fe;
    }
    > :nth-child(1) {
      width: 35%;
      padding-right: 7px;
    }
    > :nth-child(2) {
      background: #dcdcdc;
    }

    > :nth-child(3) {
      background: #dcdcdc;
    }
    .active {
      background: #3887fe !important;
    }
    > span {
      display: block;
      position: absolute;
      width: 30px;
      height: 30px;
      background: #3887fe;
      transform: rotate(45deg);
      border-top: 3px solid #ffffff;
      border-right: 3px solid #ffffff;
      border-top-left-radius: 5px;
      border-bottom-right-radius: 5px;
      margin-top: 3px;
    }
    .jiantou-1 {
      margin-left: 120px;
    }
    .jiantou-2 {
      margin-left: 245px;
      background: #dcdcdc;
    }
  }
  // 证书名称
  .certificate-title {
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #fd4f00;
    font-size: 16px;
    color: #999999;
    width: 100%;
  }
  .id-number {
    border-bottom: 1px solid #999999;
  }
  // 上传图片
  .photo-up {
    margin: 28px auto;
    width: 241.3px;
    height: 154px;
    background: url("~@/assets/shenfen_zheng.png") no-repeat center center;
    background-size: 241.3px 154px;
    display: flex;
    align-items: center;
    justify-content: center;
    > p {
      color: #282828;
      text-align: center;

      margin-top: 80px;
      // margin-right: 65px;
    }
    .inputfiles {
      width: 65px;
      height: 65px;
      border-radius: 50%;
      display: block;
      margin-bottom: 29px;
      opacity: 0;
      position: absolute;
      left: 50%;
      margin-left: -32.5px;
    }
    .up-camery {
      width: 65px;
      height: 65px;
      position: absolute;
      display: block;
    }
  }
  .photo-special {
    margin: 134px auto;
    width: 112px !important;
    height: 112px !important;
  }
  .photo-up2 {
    margin-top: 0px;
    background: url("~@/assets/zhengshu.png") no-repeat center center;
    background-size: 241.3px 154px;
  }
  .photo-up3 {
    margin-top: 100px;
    background: url("~@/assets/company_pt01.jpg") no-repeat center center;
    background-size: 241.3px 154px;
  }
  // 图片上传文字
  .up-text {
    color: #999999;
    text-align: center;
    padding: 0 30px;
  }
  .up-text3 {
    margin-top: 80px;
  }
  // 按钮
  .next-step {
    width: 112.6px;
    height: 44.6px;
    margin: 32px 15px;
  }
  .quxiao {
    background: white;
    color: #3887fe;
    border: 1px solid #3887fe;
  }
}
// 设置头部
.mint-header {
  background: white;
  color: #282828;
  font-size: 18px;
  height: 52px;
  border-bottom: 1px solid #f4f4f4;
  a {
    display: block;
  }
}
.yanzheng-button{
  .span-left{
    background: #fff;
    width: 80px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    display: inline-block;
  }
  .count{
    background: #fff;
     width: 60px;
    height: 28px;
    text-align: center;
    line-height: 28px;
    display: inline-block;
  }
}
</style>
